<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<!DOCTYPE html>
<html>
<head>
	<%@include file="../include.jsp"%>
	<script	src="../static/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
	<link  href="../static/lib/ztree/zTreeStyle.css" type="text/css" rel="stylesheet" >
	<script src="../static/lib/treeSelector.js?6"></script><!-- ztree选择器 -->
	<script src="../static/lib/zui/js/zui.sortable.min.js"></script><!-- 拖动排序 -->
</head>
<body id="z_body">
	<div class="container-fluid">     
		<div class="row">
			<div class="col-md-3">
			
				<div class="panel">
					<div class="panel-heading">
						<i class="icon icon-list"></i> 警情标注字典
						<a onclick="toAdd()" style="float:right;">新增资源</a>
					</div>
					<div class="panel-body">
						<div id="tree_1" class="ztree"></div>
					</div>
				</div>
				
				
			</div>
			
			<div class="col-md-9">
				<div class="panel" id="panel_detail" style="display:none;">
					<div class="panel-heading">
						<i class="icon icon-list"></i> <span id="detail_title"></span>
					</div>
					<div class="panel-body">
						<form class="form-horizontal" id="form1">
							<input name="bzbh" type="hidden">
				
							<div class="form-group">
								<label class="col-md-3">父级资源</label>
								<div class="col-md-6">
									<input class="form-control" name="fbzbh" validType="" type="hidden">
									<input class="form-control app_selector" name="fmc"  id="fmc"
										data_tree="{type:'jqbz', multi:false, fresh:true, extra:''}">
								</div>
							</div>
				
							<div class="form-group">
								<label class="col-md-3 app_required">资源名称</label>
								<div class="col-md-6">
									<input class="form-control" name="bzmc" validType="notEmpty">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-md-3 app_required">拼音简写</label>
								<div class="col-md-6">
									<input class="form-control" name="bzmcpy" validType="notEmpty">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-md-3 app_required">标注类型</label>
								<div class="col-md-6">
									<input class="form-control" name="bzlxdm" validType="notEmpty"  type="hidden">
									<input class="form-control app_selector" name="bzlxdmms"  id="bzlxdmms"
										data_tree="{type:'jqbzlb', multi:false, fresh:true, extra:''}">
								</div>
							</div>
							
							<div class="form-group">
								<label class="col-md-3"></label>
								<div class="col-md-6">
									<a class="btn btn-primary" onclick="save()" id="btn_save">保存</a> &nbsp;
									<a class="btn btn-danger" onclick="del()" id="btn_del">删除资源</a>
								</div>
							</div>
						</form>
						
						
					</div>
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
	var cache = {};
	var treeSetting = {
		check: {
			enable: false,
			chkStyle: "checkbox",
			chkboxType: { "Y": "", "N": "" } // 选中不包含子节点 
		},
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pid"
			}
		},
		callback: {
			beforeClick: null,
			onClick: function(e, treeId, treeNode) {
				clear();
				
				if(treeNode.id != "root") {
					loadOne(treeNode.id);
				}
			},
			onCheck: null
		}
	};
	//加载单个
	function loadOne(bzbh) {
		tool.query("../jqbzzd/tree_getOne", {bzbh: bzbh}, function(res) {
			$("#panel_detail").fadeIn("fast");
			//为表单赋值
			$("#form1 [name]").each(function() {
				var key = $(this).attr("name");
				$(this).val(res.data[key]);
			});
			$("#detail_title").html("修改资源");
			$("#btn_save").html("修改");
			$("#btn_del").show();
			
			$("#icon_show").attr("class", "icon icon-2x icon-"+res.data.tb);
		});
	}
	
	function getTree() {
		tool.query("../jqbzzd/tree_getTree", {}, function(res){
			var zNodes = res.data;
			cache.zNodes = zNodes;
			$.fn.zTree.init($("#tree_1"), treeSetting, zNodes);
			var tree = $.fn.zTree.getZTreeObj("tree_1");
			var nodes = tree.getNodes();
			tree.expandNode(nodes[0],true);
		});
	}

	function save() {
		//提交		
	if (validateForm("form1")) {
			tool.save("../jqbzzd/save", $("#form1").serialize(), function(res) {
				clear();
				getTree();
			});
		}
	}

	function toAdd() {
		clear();
		tool.query("../jqbzzd/clearSession", {}, function(res) {
			$("#btn_del").hide();

			$("#detail_title").html("新增资源");
			$("#btn_save").html("新增");
			$("#form1 [name]").each(function() {
				var name = $(this).attr("name");
				if (name != "yyid") {
					$(this).val("");
				}
			});
			$("#panel_detail").fadeIn();
		});
	}

	function del() {
		var bzbh = $("#form1 [name='bzbh']").val();
		if (bzbh) {
			myzui.confirm("本节点及所有下级资源将被删除。<br/>是否确认删除?", function() {
				clear();
				tool.save("../jqbzzd/delete", {
					bzbh : bzbh
				}, function() {
					getTree();
				});
			});
		}
	}

	//根据id获取直接子节点s
	function getSubNodesById(id) {
		var list = [];
		$(cache.zNodes).each(function() {
			if (this.pid == id) {
				list.push(this);
			}
		});
		return list;
	}

	//为排序功能显示直接下级节点s
	function showSubNodes4Sort(id) {
		var nodes = getSubNodesById(id);
		var h = '';
		$(nodes)
				.each(
						function() {
							h += '<div class="list-group-item" data_id="'+this.id+'"><i class="icon-move"></i> '
									+ this.name + '</div>';
						});
		$("#sortableList").html(h);
		reSort();//重新排序

		if ($("#sortableList .list-group-item").length > 1) {
			$("#panel_sort").fadeIn();
		}
	}

	/**
	 * 重新排序
	 */
	function reSort() {
		var i = 0;
		$("#sortableList .list-group-item").each(function() {
			$(this).attr("data-order", i++);
		});
	}

	function clear() {
		//clear
		$("#panel_sort").hide();
		$("#panel_detail").hide();
		$("#icon_show").attr("class", "");
	}

	//保存排序
	function saveSort() {
		var ids = "";
		$("#sortableList .list-group-item").each(function() {
			if (ids.length > 0) {
				ids += ",";
			}
			ids += $(this).attr("data_id");
		});
		console.info(ids);

		tool.save("../res/saveSort", {
			ids : ids
		}, function(res) {
			clear();
			getTree();
		});
	}
	getTree();
</script>
<style type="text/css">
	/* 为可拖动的条目应用可移动光标类型 */
	#sortableList > .list-group-item {cursor: move}
	
	/* 为正在被拖动的条目应用半透明外观 */
	#sortableList > .list-group-item.dragging {
	  visibility: visible;
	  opacity: .3;
	}
	
	#modal_icons a{display:inline-block; padding: 5px;}
</style>

</body>
</html>